<template>
  <div class="category">
    <div class="box">
      <el-row :gutter="10">
        <el-col :span="5">
          <ul>
            <li
              v-for="item in fenlei"
              :key="item.id"
              class="select"
            >
              <a
                class="links"
                @click="category(item.id,item.name)"
              >{{item.name}}</a>
            </li>
          </ul>
        </el-col>
        <el-col :span="19">
          <el-carousel>
            <el-carousel-item>
              <img
                src="https://img2.baidu.com/it/u=665375340,1668692975&fm=253&fmt=auto&app=120&f=JPEG?w=848&h=500"
                alt
              />
            </el-carousel-item>
            <el-carousel-item>
              <img
                src="https://img0.baidu.com/it/u=3795779619,3546001334&fm=253&fmt=auto&app=120&f=JPEG?w=690&h=388"
                alt
              />
            </el-carousel-item>
          </el-carousel>
          <div>
            <p>当前分类：<el-tag type="success">{{fenleiname}}</el-tag>
            </p>
            <div class="content">
              <div
                class="shop"
                v-for="items in shop"
                :key="items.id"
              >
                <a @click="goto('/shopdetail','ShopDetail',items.id)">
                  <img :src="'http://139.198.178.82:9090/Shopping/'+items.defaultImg">
                  <p class="shopname">{{items.name}}</p>
                  <p class="price">￥{{items.shopPrice/100}}</p>
                </a>
              </div>
            </div>
            <div v-if="this.shop ==''">
              当前分类暂无商品,等待后续上架
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "category",
  data() {
    return {
      fenlei: [],
      shop: [],
      fenleiname: "",
    };
  },
  methods: {
    getfenlei() {
      this.$post(this.url + "/category/list", {}).then((res) => {
        this.fenlei = res.data;
      });
    },
    category(id, name) {
      console.log(id);
      this.fenleiname = name;
      this.$post(this.url + "/category/detail", {
        categoryId: id,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.shop = res.data.productsDetail;
        }
      });
    },
    goto(path, name, val) {
      sessionStorage.setItem("shopid", val);
      this.$router.push({
        path: path,
        name: name,
      });
    },
  },
  created() {
    this.getfenlei();
  },
};
</script>

<style scoped>
.box {
  width: 85%;
  margin: 0 auto;
}
.select {
  height: 50px;
  line-height: 50px;
  text-align: center;
  list-style: none;
  border: 1px solid lightgray;
}
.links {
  display: block;
}
img {
  max-height: 100%;
  width: 100%;
}
.content {
  display: flex;
  flex-wrap: wrap;
}
.shop {
  width: 18%;
  margin: 10px;
  border: 1px solid lightgray;
}
p {
  margin: 10px;
}
.price {
  text-align: center;
  font-size: 20px;
  color: orange;
}
.shopname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>